<template>
  <div>
    <nav class="panel book-panel">
      <p class="panel-heading">
        预约记录
      </p>
      <a class="panel-block room-lists is-active" v-for="record in bookRecords" :key="record.id"
         @click="selectBook(record.id)">
        <span class="panel-icon">
          <i class="fa fa-building" aria-hidden="true"></i>
        </span>
        {{record.meetingRoomName}}
        {{record.bookTime}}
        <div class="container">
          <span v-if="record.valid" class="tag is-info">有效</span>
          <span v-else class="tag is-danger">无效</span>
        </div>
      </a>

      <div v-if="bookRecords.length===0" class="panel-block">
        <div class="container">
          <div class="has-text-centered">
            <p class="label">无预约记录</p>
          </div>
        </div>
      </div>
    </nav>

    <div class="modal" id="book-info">
      <div class="modal-background" @click="closeModal"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">预约信息</p>
          <button class="delete" aria-label="close" @click="closeModal"></button>
        </header>
        <section class="modal-card-body">
          <p>预约时间:{{selectedBook.bookTime}}</p>
          <p>预约过期时间:{{selectedBook.dueTime}}</p>
          <p>会议室名称:{{selectedBook.meetingRoomName}}</p>
          <p>参会人数:{{selectedBook.outnumber}}</p>
          <p>是否有效:{{selectedBook.valid?"是":"否"}}</p>
          <p></p>
        </section>
        <footer v-if="selectedBook.valid" class="modal-card-foot">
          <button class="button is-info" @click="cancelBook">取消预约</button>
        </footer>

        <footer v-else class="modal-card-foot">
          <button class="button is-info" @click="closeModal">确定</button>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
    import {toast} from "bulma-toast";

    export default {
        name: "Book",
        data: function () {
            return {
                bookRecords: [
                ],
                selectedBook: {
                    id: "1",
                    meetingRoomName: "1号楼1层1号会议室",
                    bookTime: "2019-07-04 12:18",
                    valid: true,
                    outnumber: 12,
                    dueTime: "2019-07-04 12:48"
                }
            }
        }, methods: {
            reflashPage(){
                let NewPage = '_empty' + '?time=' + new Date().getTime()/500;
                this.$router.push(NewPage);
                this.$router.go(-1);
            },
            selectBook(id) {
                //获取指定id的预约记录
                let params = {};
                params.id = id;
                fetch('/book/getRecordInfo', {
                    body: JSON.stringify(params),
                    method: 'POST',
                    headers: {
                        'content-type': 'application/json'
                    },
                }).then(function (res) {
                    return res.json();
                }).then(res => {
                    if (res.success) {
                        //赋值
                        this.selectedBook = res.data;
                        //打开对话框
                        this.openModal();
                    } else {
                        toast({
                            message: res.errorMessage,
                            type: "is-danger",
                            dismissible: true,
                            pauseOnHover: true
                        });
                    }
                });
            },
            openModal() {
                let infoModal = document.getElementById("book-info");
                infoModal.classList.add("is-active")
            },
            closeModal() {
                let infoModal = document.getElementById("book-info");
                infoModal.classList.remove("is-active")
            },
            getRecords() {
                //获取所有预约记录
                fetch('/book/getRecords', {
                    body: null,
                    method: 'POST',
                    headers: {
                        'content-type': 'application/json'
                    },
                }).then(function (res) {
                    return res.json();
                }).then(res => {
                    if (res.success) {
                        //赋值
                        this.bookRecords = res.data;
                    } else {
                        toast({
                            message: res.errorMessage,
                            type: "is-danger",
                            dismissible: true,
                            pauseOnHover: true
                        });
                    }
                });
            },
            cancelBook() {
                let params = {};
                params.id = this.selectedBook.id;
                fetch('/book/cancel', {
                    body: JSON.stringify(params),
                    method: 'POST',
                    headers: {
                        'content-type': 'application/json'
                    },
                }).then(function (res) {
                    return res.json();
                }).then(res => {
                    if (res.success) {
                        toast({
                            message: "取消预约成功",
                            type: "is-success",
                            dismissible: true,
                            pauseOnHover: true
                        });
                        //更新列表
                        this.getRecords();
                    } else {
                        toast({
                            message: res.errorMessage,
                            type: "is-danger",
                            dismissible: true,
                            pauseOnHover: true
                        });
                    }
                });
                this.closeModal();
            }
        },
        mounted() {
            this.getRecords();
        }
    }
</script>

<style scoped>
  @import '~bulma/css/bulma.css';

  .tag {
    margin-left: 10px;
  }
</style>
